---
title: "Accessibility Checker Rule Help: Valerie_Table_DataCellRelationships"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### `<th>` or `<td>` element is not related via `header` or `scope`

<div id="locLevel"></div>

For a complex data table, all `<th>` and `<td>` elements must be related via `header` or `scope` attributes

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

Navigating cell by cell through a complex data table is especially difficult when users have to search for the meaning of each cell. Using the `id` and `header` attributes captures complex relationships between data cells and header cells that can then be conveyed to users, supporting efficient table navigation.

<div id="locSnippet"></div>

### What to do

 * If this is not a data table (no relational data), use CSS instead of a `<table>` element to lay out your content (highly recommended); 
 * OR, identify the table as layout with `role="presentation"`  or `role="none"`;
 * OR, Use the `id` attribute to provide an identifier for header cells (e.g. `<th id="school">`);
 * AND use the `header` attribute on data cells to identify the appropriate header cells (e.g. `<td headers="school teacher grade">`).

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1)
[WCAG 2.1 technique H43](https://www.w3.org/WAI/WCAG21/Techniques/html/H43)

### Who does this affect?

 * Blind people using screen readers
 * People with low vision using screen magnification

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
